<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./css/reset.css">
  <title>邮储市民卡一元购</title>
  <style>
    body {
      margin: 0;
      padding: 0;
    }

    .main {
      width: 100%;
      height: 1979px;
      background-image: url(./img/ysfbg.jpg);
      background-size: 100% 100%;
      background-repeat: no-repeat;
      overflow: hidden;
    }

    .topbtn {
      width: 100%;
      display: flex;
      justify-content: space-between;
      padding-left: 15px;
      padding-right: 15px;
      margin-top: 289px;
    }

    .topbtn :first-child {
      margin-top: 6.5px;
      width: 65.5px;
      height: 48px;
    }

    .topbtn :nth-child(2) {
      width: 63.5px;
      height: 63.5px;
    }

    .title1 {
      width: 100%;
      display: flex;
      justify-content: center;
      flex-direction: column;
      align-items: center;
    }

    .title1 img {
      width: 187.5px;
      height: 31px;
    }

    .title1 p {
      font-size: 14px;
      color: #ffffff;
      margin-top: 5px;
    }

    .main::before {
      content: '';
      display: table;
    }

    .gift {
      width: 100%;
      display: flex;
      justify-content: center;
      flex-direction: column;
      align-items: center;
    }

    .gift img {
      width: 339.5px;
      height: 128.5px;
      margin-top: 15px;
    }

    .content {
      width: 100%;
      display: flex;
      justify-content: center;
      margin-top: 20px;
    }

    .rule {
      width: 345px;
      height: 1162px;
      box-shadow: 0px 0px 10px 10px rgba(255, 255, 255, 0.3) inset;
      border-radius: 25px;
      padding-left: 33.5px;
      padding-top: 13.5px;
      padding-right: 22.5px;
      font-size: 13px;
      color: #ffffff;
    }

    .rule .line {
      width: 71.5px;
      height: 20px;
      background-color: #ffffff;
      border-radius: 10px;
      font-size: 14px;
      color: #ee0a3b;
      text-align: center;
      margin-top: 10px;
      margin-bottom: 10px;
    }

    .rule .line1 {
      width: 131.5px;
      height: 20px;
      background-color: #ffffff;
      border-radius: 10px;
      font-size: 14px;
      color: #ee0a3b;
      text-align: center;
      margin-top: 10px;
      margin-bottom: 10px;
    }

    .rule .line2 {
      width: 115px;
      height: 20px;
      background-color: #ffffff;
      border-radius: 10px;
      font-size: 14px;
      color: #ee0a3b;
      text-align: center;
      margin-top: 10px;
      margin-bottom: 10px;
    }
  </style>
</head>

<body>
  <div id="main" class="main">
    <div class="topbtn">
      <img @click="$router.push('citizenorder')" src="./img/ggorder.png" alt />
      <img @click="$router.push('recommend')" src="./img/ggcard.png" alt />
    </div>
    <div class="title1">
      <img src="./img/ggchioce.png" alt />
      <p>（可获得一次优惠购资格）</p>
    </div>
    <div class="gift">
      <img @click="togetoil()" src="./img/ysfoil.png" alt />
      <img @click="togetphone()" src="./img/ysfphone.png" alt />
    </div>
    <div style="margin-top:20px" class="title1">
      <img src="./img/ggrule.png" alt />
    </div>
    <div class="content">
      <div class="rule">
        <p class="line">活动时间</p>
        <p>即日起至2020年12月31日</p>
        <p class="line">活动对象</p>
        <p>邮储银行市民卡持卡人（以下简称“持卡人”）</p>
        <p class="line">活动内容</p>
        <p style="color: #fcfe03;">1.持卡人在云闪付绑定“邮储银行市民卡”，即可1元购40元话费或盛洲食用植物调和油2.5L。</p>
        <p style="color: #fcfe03;">2.持卡人首次在微信绑定“邮储银行市民卡”，即可1元购30元话费或盛洲食用植物调和油1.8L。</p>
        <p>3.以上活动二选一，不可同时参加。</p>
        <p class="line">活动细则</p>
        <p>1.本次活动名额有限，先到先得。</p>
        <p>2.每个客户活动期间可获得一次优惠购资格，即每个客户可选择1个渠道参与活动，微信和云闪付渠道不可叠加。</p>
        <p>
          3.本活动中有关商品或服务由银商旅行580提供，持卡人应当自行决定是否使用商品或服务。邮储银行不对平台所提供的商品或服务的质量提供保证，在法律法规允许的范围内，邮储银行不就有关商品或服务引起的有关事宜或损害承担责任。对此，持卡人应自行直接接洽处理解决。
        </p>
        <p>4.客户用原手机解绑后再用新的手机号重新绑卡不算首绑客户，将不享受本次活动权益。</p>
        <p>
          5.任何通过非正常手段（包括但不限于作弊、系统漏洞、黑客工具、软件作弊、虚假工具等）套取权益的客户，邮储银行厦门分行有权取消其参与本次活动的权益并在必要时追究相关法律责任；如发现客户有经销、专卖等通过本活动牟利的交易行为，邮储银行厦门分行有权撤销客户在活动中享受的优惠。
        </p>
        <p>6.如客户获得此优惠权益后，请妥善保管所得权益，不得有意或无意泄露给他人，如权益已经使用，我行将不予以补发。</p>
        <p>7.邮储银行厦门分行有权在法律允许范围内对本活动进行解释。</p>
        <p class="line1">话费权益使用规则</p>
        <p>1.到账时间：1-10分钟即可到账，遇到月初月末高峰期会有许延迟，详细到账时间以运营商短信提醒为准（如遇运营商系统忙或者客户本人手机已欠费停机的情况下，则客户无法收到短信提醒）;</p>
        <p>2.仅限于中国移动，中国联通，中国电信充值，请认真仔细填写所需要充值的手机号码，如因用户错填手机号码导致的损失均不负责;</p>
        <p>3.此权益不记名，不挂失，不兑换现金，一经兑换不退不换，请谅解;</p>
        <p>4.权益在使用过程中如遇任何问题请咨询客服热线电话：0592-5215580。</p>
        <p class="line2">食用油兑换规则</p>
        <p>食用油可在邮储银行办卡/激活网点领取。</p>
      </div>
    </div>
    <!-- 弹窗 -->
    <!-- <div v-if="isbind" class="mask">
      <div class="user_phone">
        <div class="title">请输入信息</div>
        <div class="turn_off" @click="turnOff">
          <img src="@/assets/images//citizen/ggcha.png" alt />
        </div>
        <div class="phone">
          <img src="@/assets/images//citizen/ggname.png" alt />
          <input @blur="resetDiv" v-model="haveName" type="text" placeholder="请输入您的真实姓名" />
        </div>
        <p class="toline"></p>
        <div class="phone">
          <img src="@/assets/images//citizen/ggid.png" alt />
          <input maxlength="6" @blur="resetDiv" v-model="haveId" type="text" placeholder="请输入您身份证后6位" />
        </div>
        <p class="toline"></p>
        <div class="phone">
          <img src="@/assets/images//citizen/ggpicon.png" alt />
          <input @blur="resetDiv" v-model="haveNum" type="number" placeholder="请输入您的手机号码" />
        </div>
        <p class="toline"></p>
        <div class="auth">
          <img src="@/assets/images//citizen/ggmag.png" alt />
          <input @blur="resetDiv" v-model="authCode" placeholder="请输入手机验证码" />
          <div :class="second=='获取验证码'? 'get_auth' : 'read_time'" @click.self="toMessage">
            {{second==='获取验证码'?'获取验证码':second+'s'}}</div>
        </div>
        <p class="toline"></p>
        <div class="phone">
          <img src="@/assets/images//citizen/ggid.png" alt />
          <input maxlength="6" @blur="resetDiv" v-model="bankname" type="text" placeholder="网点名称" />
        </div>
        <div class="sure_btn" @click="sureBtn">确定</div>
      </div>
    </div> -->
    <!-- 等待客户经理确认弹窗 -->
    <!-- <div class="mask" v-if="manager">
      <div class="waititem">
        <div class="items">
          <p>温馨提示</p>
          <p>等待客户经理确认</p>
          <p>稍后刷新页面购买。</p>
        </div>
        <div class="itembtn">我知道了</div>
      </div>
    </div> -->
    <!-- 已参与过活动 -->
    <!-- <div class="mask" v-if="isjoin">
      <div class="waititem1">
        <div class="items">
          <p>每个客户活动期间仅可获得一次</p>
          <p>优惠购资格，您已参与过活动！</p>
        </div>
        <div @click="isjoin = false" class="itembtn">我知道了</div>
      </div>
    </div> -->
    <!-- 获得一元购机会 -->
    <!-- <div class="mask" v-if="sucees">
      <div class="waititem">
        <div class="items">
          <p>恭喜您</p>
          <p>您获得一元购参与资格</p>
        </div>
        <div class="itembtn">立即参与</div>
      </div>
    </div> -->
    <!-- 没有获得资格 -->
    /
    <!-- 活动弹窗 -->
    <!-- <div class="act_toast" v-if="showToa">
      <div class="toast_item">
        <img class="toast_img" src="@/assets/images/citizen/wxgift.png" alt />
        <p class="toastitem" @click="toActivity">前往下载云闪付APP</p>
        <p class="toastitem1" @click="activityImg">取消</p>
      </div>
    </div>-->
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
  <script>
    new Vue({
      el: '#main',
      data() {
        return {
          isbind: false,
          manager: false,
          sucees: false,
          unsucees: false,
          isjoin: false,
          showToa: true,
          haveName: '',
          haveNum: '',
          haveId: '',
          bankNo: '',
          bankname: '',
          authCode: '',
          havestation: '',
          second: '获取验证码'
        }
      },
      created() {
        console.log(111)
        var browser = navigator.userAgent.toLowerCase();
        var id = window.location.href.split('station=')[1];
        // window.sessionStorage.setItem('toast1', id);
        // localStorage.setItem('toast1', id)
        // alert(id)

        // alert(localStorage.getItem('toast1'))
        if (Array.isArray(browser.match(/MicroMessenger/i))) {
          if (browser.match(/MicroMessenger/i)[0] !== 'micromessenger') {
            window.location.href =
              'http://youchu.580travel.com/' + 'entrance/goto1?redir=citizenCard?' + 'station=' + id;
          } else {
            window.location.href =
              'http://youchu.580travel.com/' + 'entrance/goto?redir=wxcitizenCard?' + 'station=' + id;
          }
        } else {
          if (browser.match(/MicroMessenger/i) !== 'micromessenger') {
            window.location.href =
              'http://youchu.580travel.com/' + 'entrance/goto1?redir=citizenCard?' + 'station=' + id;
          } else {
            window.location.href =
              'http://youchu.580travel.com/' + 'entrance/goto?redir=wxcitizenCard?' + 'station=' + id;
          }
        }
      },
      // 注释
      // destroyed() {
      //   document.querySelector('body').setAttribute('style', 'background:#f5f5f5');
      // },
      // mounted() {
      //   if (window.sessionStorage.getItem('toast') === 'key') {
      //     console.log(window.sessionStorage.getItem('toast'));
      //     this.showToa = false;
      //   }
      //   this.bankNo = window.location.href.split('station=')[1];
      //   this.getbankname();
      //   this.initWxChat();
      // },
      // methods: {
      //   // 获取银行名称
      //   getbankname() {
      //     this.$http
      //       .post('oneYuanPurchase/getBankName', { bankNo: this.bankNo })
      //       .then(res => {
      //         if (res.data.code === '0') {
      //           this.bankname = res.data.object;
      //         }
      //         console.log(res);
      //       });
      //   },
      //   // ios键盘顶起
      //   resetDiv() {
      //     setTimeout(() => {
      //       const scrollHeight =
      //         document.documentElement.scrollTop || document.body.scrollTop || 0;
      //       window.scrollTo(0, Math.max(scrollHeight - 1, 0));
      //     }, 100);
      //   },
      //   // 选择食用油
      //   togetoil() {
      //     if (window.sessionStorage.getItem('message')) {
      //       this.$router.push({
      //         path: 'tonowpay',
      //         query: {
      //           ptype: '1'
      //         }
      //       });
      //     } else {
      //       this.isbind = true;
      //     }
      //   },
      //   // 选择话费充值
      //   togetphone() {
      //     if (window.sessionStorage.getItem('message')) {
      //       this.$router.push('paycenter');
      //     } else {
      //       this.isbind = true;
      //     }
      //   },
      //   // 获取验证码
      //   toMessage(event) {
      //     window.scroll(0, 0);
      //     if (this.second === '获取验证码') {
      //       this.$http
      //         .post('/entrance/getSmsCode', {
      //           telphone: this.haveNum,
      //           source: 0
      //         })
      //         .then(res => {
      //           if (res.data.code === '1') {
      //             console.log(res);
      //             Toast(res.data.message);
      //           } else {
      //             this.second = 60;
      //             this.itl = setInterval(() => {
      //               if (this.second > 0) {
      //                 this.second--;
      //               } else {
      //                 this.second = '获取验证码';
      //                 clearInterval(this.itl);
      //               }
      //             }, 1000);
      //           }
      //         });
      //     } else {
      //       Toast('您点的太快了');
      //     }
      //   },
      //   // 确定按钮
      //   sureBtn() {
      //     if (
      //       this.haveName === '' &&
      //       /^1[3456789]\d{9}$/.test(this.haveNum) === false
      //     ) {
      //       Toast('请输入正确姓名和号码');
      //     } else if (this.haveId === '') {
      //       Toast('请输入身份证后六位');
      //     } else {
      //       this.$http
      //         .post('/oneYuanPurchase/userCheckOnline', {
      //           type: '2',
      //           idCardNo: this.haveId,
      //           telphone: this.haveNum,
      //           code: this.authCode,
      //           username: this.haveName,
      //           bankNo: this.bankNo
      //           // bankNo: '20'
      //         })
      //         .then(res => {
      //           console.log(res);
      //           if (res.data.code === '0') {
      //             this.isbind = false;
      //             Toast(res.data.message);
      //             window.sessionStorage.setItem('message', res.data.object);
      //           } else {
      //             // this.isbind = false;
      //             Toast(res.data.message);
      //           }
      //         });
      //     }
      //   },
      //   // 关闭验证信息弹窗
      //   turnOff() {
      //     this.isbind = false;
      //   },
      //   // 跳转云闪付
      //   toActivity() {
      //     window.sessionStorage.setItem('toast', 'key');
      //   },
      //   // 关闭弹窗
      //   activityImg() {
      //     this.showToa = false;
      //     window.sessionStorage.setItem('toast', 'key');
      //   }
      // },
      // components: {}
    })
  </script>
</body>

</html>